<template>
    <div class="keyInputBox" v-show="val" :style="{width: width}">
        <input v-model="keyVal" class="input100 col" :type="type" name="pass" :placeholder="placeholder"
               @focus="onFocus" @blur="onBlur" autocomplete="off" ref="keyBoard">
        <span class="focus-input100">
            <slot name="prefix"><i class="el-icon-lock"></i></slot>
        </span>

        <transition name="el-fade-in-linear">
            <div class="keyboard" :style="{top: top}"
                 v-if="showKeyboard">
                <p v-for="(keys, i) in keyList" :key="i">
                    <template v-for="key in keys">
                        <i v-if="key === 'top'" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i>
                        <i v-else-if="key === '123'" @click.stop="clickKey" class="tab-num">123</i>
                        <i v-else-if="key === 'del'" @click.stop="clickKey" id="del"
                           class="iconfont icon-delete key-delete"></i>
                        <i v-else-if="key === 'blank'" @click.stop="clickKey"
                           class="iconfont icon-konggejian-jianpanyong tab-blank"></i>
                        <i v-else-if="key === 'symbol'" @click.stop="clickKey" class="tab-symbol">符</i>
                        <i v-else-if="key === 'point'" @click.stop="clickKey" class="tab-point">·</i>
                        <i v-else-if="key === 'enter'" @click.stop="clickKey"
                           class="iconfont icon-huiche tab-enter"></i>
                        <i v-else @click.stop="clickKey">{{key}}</i>
                    </template>
                </p>
            </div>
        </transition>
    </div>
</template>

<script>

    export default {
        name: 'keyInput',
        model: {
            prop: 'keyValue',
            event: 'keyInput'
        },
        props: {
            placeholder: {
                type: String,
                default: '请填写'
            },
            type: {
                type: String,
                default: 'text'
            },
            keyValue: {
                type: String,
                default: '',
            },
            top: {
                type: String,
                default: '0'
            },
            width: {
                type: String,
                default: '260px'
            },
        },
        data() {
            return {
                val: true,
                showKeyboard: false,
                keyList: [],
                // 0 小写 1 大写 2 数字 3 符号
                status: 2,
                lowercase: [
                    ['7', '8', '9'],
                    ['4', '5', '6'],
                    ['1', '2', '3'],
                    ['del', '0', 'ok'],
                ],
                noblur: true,
                clear: null,
                keyVal: this.keyValue
            }
        },
        watch: {
            keyVal(val) {
                this.$emit("keyInput", val);
            }
        },
        beforeMount() {
            this.keyList = this.lowercase
        },
        methods: {
            onFocus(event) {
                this.showKeyboard = true;
                this.noblur = true;
            },
            onBlur(event) {
                // let target = event.target || event.srcElement;
                this.noblur = false;
                this.clear = setTimeout(() => {
                    if (!this.noblur) {
                        this.showKeyboard = false;
                    }
                }, 100);
            },
            clickKey(event) {
                if (event.type === 'click' || event.type === 'touchstart') {
                    clearTimeout(this.clear);
                    this.$refs.keyBoard.focus();
                    this.noblur = true;
                }
                // if(event.type === 'click' && this.equip) return
                const value = event.srcElement.innerText;
                const id = event.srcElement.id;
                const target = event.srcElement ? event.srcElement : event.target;
                if (id !== '' && id === 'del') {
                    // 如果点击的是id为del的表示是删除
                    this.emitValue(id);
                } else {
                    // 否则
                    value && id !== 'del' ? this.emitValue(value) : this.tabHandle(target.classList);
                }
            },
            tabHandle({value = ''}) {
                if (value.indexOf('tab-num') > -1) {
                    // 数字键盘数据
                    this.status = 2
                } else if (value.indexOf('key-delete') > -1) {
                    console.log(value.indexOf('key-delete'))
                    this.emitValue('delete')
                } else if (value.indexOf('tab-blank') > -1) {
                    this.emitValue(' ')
                } else if (value.indexOf('tab-enter') > -1) {
                    this.emitValue('\n')
                } else if (value.indexOf('tab-point') > -1) {
                    this.emitValue('.')
                } else if (value.indexOf('tab-symbol') > -1) {
                    this.status = 3
                } else if (value.indexOf('tab-top') > -1) {
                    if (this.status === 0) {
                        this.status = 1
                    } else {
                        this.status = 0
                        this.keyList = this.lowercase
                    }
                }
            },
            emitValue(key) {
                const val = this.keyVal;
                if (key === 'del') {
                    this.keyVal = val.substring(0, val.length - 1)
                } else if (key === 'ok') {
                    this.showKeyboard = false;
                    this.$refs.keyBoard.blur();
                    // this.onBlur();
                } else {
                    this.keyVal = val + key;
                }
                this.$emit('keyVal', key)
            },
        },
        components: {}
    }
</script>
<style lang="scss" scoped>
    .keyInputBox {
        position: relative;
    }

    .keyboard {
        display: inline-block;
        width: 263px;
        font-size: 18px;
        border-radius: 2px;
        background-color: #e5e6e8;
        user-select: none;
        /*bottom: 0;*/
        position: absolute; /*定位数字键盘*/
        right: -280px;
        top: 0;
        z-index: 999;
        pointer-events: auto;

        p {
            width: 100%;
            margin: 0 auto;
            height: 42px;
            margin-bottom: 0.5em;
            display: flex;
            display: -webkit-box;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;

            i {
                display: block;
                margin: 0 0.2%;
                height: 50px;
                line-height: 52px;
                font-style: normal;
                font-size: 24px;
                border-radius: 3px;
                width: 44px;
                background-color: #fff;
                text-align: center;
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0;
                -webkit-box-flex: 1;

                &:active {
                    background-color: darken(#ccc, 10%);
                }
            }

            .tab-top {
                width: 50px;
                margin: 0 1%;
                background: #cccdd0;
                color: #fff;
                font-size: 24px;
            }

            .key-delete {
                width: 47px;
                margin: 0 0.2%;
                color: #827f7f;
            }

            .tab-num {
                font-size: 18px;
                background: #dedede;
                color: #5a5959;
            }

            .tab-point {
                width: 20px;
            }

            .tab-blank {
                width: 50px;
                font-size: 12px;
                padding: 0 15px;
                color: #5a5959;
                line-height: 60px;
            }

            .tab-symbol {
                width: 20px;
                font-size: 18px;
            }

            .tab-enter {
                font-size: 30px;
                line-height: 54px;
            }

            &:nth-child(2) {
                width: 100%;
            }
        }
    }


    .input100 {
        font-family: "Microsoft Yahei";
        font-size: 16px;
        color: rgb(51, 51, 51);
        line-height: 1.2;
        display: block;
        width: 100%;
        height: 55px;
        background: transparent;
        padding: 0px 43px 0px 43px;

        outline: none;
        border: none;
    }

    .focus-input100 {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        pointer-events: none;
    }


    .focus-input100 i {
        color: rgb(173, 173, 173);
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        height: 100%;
        bottom: 0px;
        left: 0px;
        padding-left: 13px;
        padding-top: 0;
    }

    .focus-input100::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -2px;
        left: 0px;
        width: 0px;
        height: 2px;
        background: rgb(127, 127, 127);
        transition: all 0.4s ease 0s;
    }

    .input100:focus + .focus-input100::before {
        width: 100%;
    }

    .has-val.input100 + .focus-input100::before {
        width: 100%;
    }

    .input100:focus + .focus-input100 i {
        color: rgb(166, 75, 244);
    }

    .has-val.input100 + .focus-input100 i {
        color: rgb(166, 75, 244);
    }
</style>
